<template>


    <div class="common-layout" :style="{height:'100%'}">
        <el-container>
            <el-header>
                <div class="title">
                    <h2>用户管理</h2>
                    <el-breadcrumb separator="/">
                </el-breadcrumb>
             </div>
            </el-header>
            <el-main>
                <el-table 
                :data="state.tableData.slice((state.currentPage - 1) * state.pageSize, state.currentPage * state.pageSize)"
                height="700" 
                max-height="100%"
                v-model="state.itemData"
                style="width: 100%">
                    <el-table-column type="index" width="50" />
                    <el-table-column prop="avatar" label="" width="100">
                      <template v-slot="{ row }">
                        <el-avatar :src="serverUrl + '\\' +row.avatar" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="昵称" width="250" />
                    <el-table-column prop="account" label="账号" width="250" />
                    <el-table-column prop="role" label="权限" width="350" :formatter="formatRole"/>
                    <el-table-column prop="createdAt" label="创建日期" width="350" />
                    <el-table-column fixed="right" min-width="200">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <el-button text size="small" @click="handleClick('detail',scope.$index, scope.row)"
                        >查看</el-button
                        >
                        <el-button
                        size="small"
                        type="primary"
                        @click="handleClick('edit',scope.$index, scope.row)"
                        >编辑</el-button
                        >
                        <el-button
                        size="small"
                        type="info"
                        disabled
                        @click="handleClick('edit',scope.$index, scope.row)"
                        >禁用此账号</el-button
                        >

                    </template>
                    </el-table-column>
                </el-table>

                <el-pagination
                v-model:current-page="state.currentPage"
                v-model:page-size="state.pageSize"
                :page-sizes="[5,10 , 30, 50]"
    
                layout="total, sizes, prev, pager, next, jumper"
                :total="state.tableData.length"
             
                @current-change="handleCurrentChange"
                />
            </el-main>

            <div>
    <UserEditInfoDialog
         v-if="dialogFromVisible"
         :visible="dialogFromVisible"
         :type="dialogType"
         :data="state.detailRowData"
         @toggle="toggleVisible"
         @refresh="refreshData"
         >
    </UserEditInfoDialog>

   </div>

        </el-container>
    </div>


</template>

<script setup>

import { reactive,ref,watch,onMounted } from 'vue'
import requestMethods from '../../api/api';
import UserEditInfoDialog from '../../components/dialog/UserEditInfoDialog.vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import { useRouter } from "vue-router";

const router = useRouter()

const dialogType = ref('');
const serverUrl = process.env.VUE_APP_AVATAR_API
const dialogFromVisible = ref(false)
const state = reactive({
  currentPage: 1,
  pageSize: 10,
  small: false,
  detailRowData:{},
  background: false,
  disabled: false,
  tableData :[  
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  }, {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  }, {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  }, {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  }, {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  }, {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  }, {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  }
]
})

watch(() => dialogFromVisible, (newV, oldV) => {
  console.log(newV, oldV)
})


onMounted(()=>{
  requestMethods.getAllUsers().then(res=>{
    state.tableData = res.data
  }).catch(err=>{
    console.log(err.response);
    ElMessageBox.alert('当前账号操作用户权限不足', err.response.data.message, {
    confirmButtonText: '我知道了',
    callback: () => {
      router.push("/todo/all");
      ElMessage({
        type: 'info',
        message: '跳转回主页'
      })
    },
  })
})})

const handleClick = (type,index,row) => {
    dialogFromVisible.value = true
    dialogType.value = type
    state.detailRowData = row
    console.log(index,state.detailRowData);
}


const toggleVisible = (value) =>{
    dialogFromVisible.value = value.toggle
   
}
const formatRole = (row) => {
      // 将 admin 转换为系统管理员，将 user 转换为普通用户
      return row.role === 'admin' ? '系统管理员' : '普通用户';
    }
const refreshData = (value) => {
  console.log(value);
  if(value.refresh){
    requestMethods.getAllUsers().then(res=>{
    state.tableData = res.data
  }).catch(err=>{
    console.log(err.response);
    ElMessageBox.alert('当前账号操作用户权限不足', err.response.data.message, {
    confirmButtonText: '我知道了',
    callback: () => {
      router.push("/todo/all");
      ElMessage({
        type: 'info',
        message: '跳转回主页'
      })
    },
  })
})
  }
}

const handleCurrentChange = (val) => {
    state.currentPage = val
    console.log(val);
}

</script>

<style scoped lang="less">
.el-container {
  
    --el-header-height:auto;
    
    .el-header {

      
        
     

        .title{

            display: flex;
            justify-content: flex-start;
       
            align-items: center;

            h2{
         
                border: 0;
               
                line-height: 40px;
            }
            .el-breadcrumb{
            padding-left: 20px;
            
        }
        }
       
    }

    .el-main {
        margin: 0;
        margin-top: 20px;
        height: 80vh;
        background-color: #ffff;
        border-radius: 25px 0px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .el-pagination{
            padding-top: 20px;
        }
    }
}
</style>